<template>
  <div class="app-container">
    <el-tabs type="card" @tab-click="TableClick">
      <el-tab-pane label="网关脚本库">
        <div class="filter-container">
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="refreshClient"
          >刷新</el-button>
        </div>
        <el-table :data="files" border style="width: 100%">
          <el-table-column fixed label="文件">
            <template slot-scope="scope">{{ scope.row.file}}</template>
          </el-table-column>
          <el-table-column fixed label="状态">
            <template slot-scope="scope">{{ scope.row.status?"加密":"未加密"}}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button
                @click="openkeydialog(scope.row.file,scope.row.status)"
                size="mini"
                :type="scope.row.status?'danger':'success'"
                plain
              >{{scope.row.status?"解密":"加密"}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="远程脚本库">
        <div class="filter-container">
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            icon="el-icon-edit"
            @click="refreshRemote"
          >刷新</el-button>
          <el-checkbox v-model="reload" class="filter-item" style="margin-left:15px;">自动重载脚本</el-checkbox>
        </div>
        <el-table :data="remotefiles" border style="width: 100%">
          <el-table-column fixed label="文件">
            <template slot-scope="scope">{{ scope.row.file}}</template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="GetScript(scope.row.file)" size="mini" type="primary" plain>查看</el-button>
              <el-button @click="SendRemoteFile(scope.row.file)" size="mini" type="success" plain>发送</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :title="title" :visible.sync="ScriptDialog" width="80%" center>
      <tinymce v-model="Scriptcontent" :height="400" />
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="ScriptDialog = false">关 闭</el-button>
      </span>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="KeyDialogVisible" width="30%" center>
      <span center>{{file}}</span>
      <el-input placeholder="请输入key" v-model="key" clearable></el-input>
      <el-button v-if="title=='加密'" @click="randomkey">生成key</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="KeyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlefile(file)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as API from "@/api/script";
import Tinymce from "@/components/Tinymce";
export default {
  components: { Tinymce },
  data() {
    return {
      client: this.$route.params.client,
      clientpath: "c:\\天域·微服务网关\\脚本库\\",
      skey: this.$route.params.skey,
      remote: this.$route.params.remote,
      files: [],
      remotefiles: [],
      KeyDialogVisible: false,
      key: "",
      file: "",
      title: "",
      reload: false,
      ScriptDialog: false,
      Scriptcontent: ""
    };
  },

  created() {
    if (this.$route.params.client == null) {
        this.$notify({
                title: "错误",
                message: "未选择网关",
                type: "warning",
                duration: 2000
              });
      this.$router.push({ name: "clients" });
      return;
    }
    this.GetScriptList();
  },
  methods: {
    GetScript(file) {
      this.title = file;
      API.GetRemoteFile("http://" + this.remote + "/", {
        skey: this.skey,
        file
      })
        .then(response => {
          let data = response.data;
          if (data.code != 0) {
            this.$message.error(data.msg);
            return;
          }
          this.Scriptcontent = data.data;
          this.ScriptDialog = true;
        })
        .catch(error => {
          this.$message.error("无法连接远程脚本网关");
        });
    },
    TableClick(tab, event) {
      if (tab.index == 0) {
        this.GetScriptList();
      }
      if (tab.index == 1) {
        this.GetRemoteFileList();
      }
    },
    randomkey() {
      this.key = this.randomString(16);
    },
    randomString(len) {
      len = len || 32;
      var $chars =
        "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length;
      var pwd = "";
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    },
    GetScriptList() {
      API.GetScriptList("http://" + this.client + "/api.v1/", {
        skey: this.skey,
        path: this.clientpath
      })
        .then(response => {
          let data = response.data;
          if (data.code != 0) {
            this.$message.error(data.msg);
            return;
          }
          this.files = data.data;
        })
        .catch(error => {
          this.$message.error("无法连接微服务网关");
        });
    },
    GetRemoteFileList() {
      API.GetRemoteFileList("http://" + this.remote + "/", {
        skey: this.skey
      })
        .then(response => {
          let data = response.data;
          if (data.code != 0) {
            this.$message.error(data.msg);
            return;
          }
          this.remotefiles = data.data;
        })
        .catch(error => {
          this.$message.error("无法连接远程脚本网关");
        });
    },
    openkeydialog(f, status) {
      this.key = "";
      this.file = f;
      this.title = status ? "解密" : "加密";
      this.KeyDialogVisible = true;
    },
    handlefile(f) {
      if (this.key.length != 16) {
        this.$message.error("加密KEY需要16位");
        return;
      }
      API.handlefile("http://" + this.client + "/api.v1/", {
        skey: this.skey,
        path: this.clientpath,
        file: this.file,
        key: this.key,
        act: this.title
      })
        .then(response => {
          let data = response.data;
          // console.log(data);
          if (data.code != 0) {
            this.$message.error(data.msg);
            return;
          }
          this.$message.success(data.msg);
          this.KeyDialogVisible = false;
          this.refreshClient();
        })
        .catch(error => this.$message.error(error));
    },
    SendRemoteFile(f) {
      let reload = 0;
      if (this.reload) {
        reload = 1;
      }
      API.SendRemoteFile("http://" + this.remote + "/", {
        skey: this.skey,
        path: this.clientpath,
        file: f,
        target: this.client,
        reload
      })
        .then(response => {
          let data = response.data;
          // console.log(data);
          if (data.code != 0) {
            this.$message.error(data.msg);
            return;
          }
          this.$message.success(data.msg);
          this.KeyDialogVisible = false;
          this.refreshView();
        })
        .catch(error => this.$message.error(error));
    },
    refreshClient() {
      this.GetScriptList();
    },
    refreshRemote() {
      this.GetRemoteFileList();
    }
  }
};
</script>

<style>
</style>